<template>
	<view class="shop-cart" :class="themeName">
		<headers></headers>
		<view class="main ">

			<view v-if="shopList.length > 0" class="shop-list">

				<view class="shop-list-li" v-for="item in shopList">
					<view class="cart-title-icon" @click="delShop(item.id)">
						<img src="@/static/images/close-icon.png" />
					</view>
					<template v-if="item.type == 1">
						<image :src="item.spu_info.cover_url" @click="goGoodsDetail(item.spu_info.spu_id, 1)" />
						<view class="shop-list-li-right">
							<view class="li-name">
								{{ item.spu_info.name }}
							</view>
							<view class="li-standard">
								{{ item.spu_info.standard }}
							</view>
							<view class="li-num-price">
								<text class="li-price">RM{{ item.price }}</text>
								<view class="cartNum" @tap.stop="">
									<u-number-box v-model="item.num" :min="1" async-change positiveInteger @change="cartCountChange({id:item.id, num:item.num})" />
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.type == 2">
						<image :src="item.combo_info.cover_url" @click="goGoodsDetail(item.combo_info.combo_id, 2)" />
						<view class="shop-list-li-right">
							<view class="li-name">
								{{ item.combo_info.name }}
							</view>
							<view class="li-selection">
								<view class="li-selection-item" v-for="stion in item.combo_info.selection">
									{{ stion.standard }}
								</view>
							</view>
							<view class="li-num-price">
								<text class="li-price">RM{{ item.price }}</text>
								<view class="cartNum" @tap.stop="">
									<u-number-box v-model="item.num" :min="1" async-change positiveInteger @change="cartCountChange({id:item.id, num:item.num})" />
								</view>
							</view>
						</view>
					</template>
				</view>
				<view style="height: 80rpx;">

				</view>


			</view>

			<!-- 购物车空状态 -->
			<view class="cart-null bg-white m-b-20" style="padding: 80rpx 0 50rpx" v-else>
				<image class="img-null" src="/static/images//custom/nocart.png"></image>
				<view class="muted m-b-20 ">购物车暂无任何商品~</view>
				<view class="br60 btn flex row-center primary" @tap="goShoping">回到商城</view>
			</view>

		</view>

		<!-- 底部结算栏 -->
		<view class="footer bg-white">

			<view class="all-price nr m-r-20 flex row-between">
				<view>CART TOTALS：</view>
				<price :content="countPrice || 0" :color="themeColor" mainSize="36rpx" minorSize="28rpx"></price>
			</view>
			<button type="primary"   class="right-btn br60 lighter primary" @tap="goToConfirm">Proceed to Checkout</button>
		</view>

		<!-- 是否删除商品的弹窗 -->
		<u-modal v-model="delPopup" :showCancelButton="true" comfirm-text="狠心删除" :confirm-color="themeColor"
			:show-title="false" @confirm="goodsDelete">
			<view style="padding-top: 40rpx" class="flex row-center">
				<!-- <image class="icon-lg" src="/static/images/icon_warning.png" /> -->
				<view style="margin:50rpx 0;">确认删除该商品吗？</view>
			</view>
		</u-modal>
		<tabbar />

		<!-- 加载中 -->
		<u-mask :show="isChangeLoading" :mask-click-able="false"
			:custom-style="{ background: 'rgba(0, 0, 0, 0)' }"></u-mask>
		<view class="loading" v-if="isChangeLoading">
			<u-loading size="40" :color="themeColor"></u-loading>
			<view class="white m-t-20">
				加载中...
			</view>
		</view>
		<view>
				<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script type="text/javascript">
import {
	mapGetters,
	mapState,
	mapActions
} from "vuex";


import { OrderTypeEnum } from '@/utils/enum'
import { trottle } from '@/utils/tools'

export default {
	name: 'ShopCart',

	data() {
		return {
			pagesData: [],          //diy的组件
			total_amount: '',       //合计｜｜总余额
			cartLists: [],          //购物车数据
			cartListsId: [],        //购物车数据的所有ID
			delPopup: false,        //是否弹出删除商品的弹窗
			cart_id: 0,             //删除的购物车ID
			isSelectedAll: false,   //是否全选

			isChangeLoading: false,   	//是否是操作请求中状态

			showMenu: false,
			showCart: false
		}
	},
	computed: {
		...mapGetters(["cartNum"]),
		...mapGetters(['shopList']),
		countPrice() {
			let count = 0;
			this.shopList.map(item => {
				count += item.price * item.num
			})
			return count
		}
	},
	methods: {
		...mapActions(['getCartList']),
		...mapActions(["delShop"]),
		...mapActions(["cartCountChange"]),


		// 商品数量的修改
		// countChange({ value }, id) {
		// 	this.isChangeLoading = true
		// 	apiCartCountChange({
		// 		shop_param: {
		// 			id: id,
		// 			num: value
		// 		}
		// 	}).then(res => {
		// 		this.$store.dispatch('getCartNum')
		// 	}).finally(() => {
		// 		this.getCartList()
		// 	})
		// },

		// 弹窗拿到当前需要删除的商品购物车ID
		changeDelPopup(cart_id) {
			this.delPopup = true;
			this.cart_id = cart_id;
		},

		// 删除购物车的商品
		async goodsDelete() {
			this.isChangeLoading = true
			await apiCartDel({
				cart_id: this.cart_id
			})
			await this.getCartList()
			this.$toast({
				title: '删除成功'
			})
		},

		// 去购物
		goShoping() {
			uni.$emit('colseCart');
			this.$Router.replaceAll('/pages/shopping/shopping')
		},

		// 去结算
		goToConfirm() {
			if(this.shopList.length){
				let ids = []
				this.shopList.map(item => {
					ids.push(item.id)
				})
				console.log("ids", ids)
				this.$Router.push({
					path: '/pages/suborder/suborder',
					query: {
						ids: ids
					}
				})
			}else{
				this.$refs.uToast.show({
					title: '购物车暂无任何商品~',
				})
			}
			
		},

		// 去首页
		changeTab() {
			this.$Router.replaceAll({
				path: '/pages/index/index'
			})
		},

	},

	onLoad() {
		this.getCartList();

		let that = this;
		uni.$on('colseCart', function (data) {
			that.showCart = false;
		})
	},
	async onShow() {
		// this.getCartNum()
		// await this.getCartList()
		// if (this.isLogin) {
		// 	this.getPage()
		// }

	},

	created() {
		// this.countChange = trottle(this.countChange, 200)
	}
}
</script>
<style lang="scss">
.shop-cart {
	position: relative;

	.loading {
		position: fixed;
		left: 39vw;
		top: 35vh;
		height: 170rpx;
		width: 170rpx;
		border-radius: 20rpx;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

.main {
	padding-bottom: 100rpx;
}

.cart-list {
	.cart-item {
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;

		&.invalid {
			opacity: .7;
			// background-color: #999;
			// @include background_color();
		}
	}

	.select {
		height: 80rpx;
		padding: 0 20rpx;
		// @include border_color();
		// border-style: solid;
	}
}

.cart-null {
	text-align: center;

	.btn {
		border-width: 1rpx;
		border-style: solid;
		width: 184rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 8rpx 24rpx;
	}
}

.footer {
	left: 0;
	margin-bottom: 100rpx;
	bottom: calc(env(safe-area-inset-bottom));
	width: 100%;
	z-index: 20;
	height: 180rpx;
	position: fixed;
	padding: 0 24rpx;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-top: 1px solid #E6E6E6;

	.all-price {
		text-align: right;
		flex: 1;
		padding: 10rpx;
		font-weight: 700;
	}

	.right-btn {
		padding: 5rpx 45rpx;
		background-color: $-color-default;

	}

	.primary {
		margin: 10rpx 0 50rpx;
		background-color: $-color-default;
	}
}

.shop-list {
	.shop-list-li {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
		position: relative;

		.cart-title-icon {
			background: #F5F5F5;
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			img {
				width: 15rpx;
				height: 15rpx;
			}
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}

		.shop-list-li-right {
			margin-left: 15rpx;

			.li-name {
				font-size: 28rpx;
				color: #000;
			}

			.li-standard {
				font-size: 24rpx;
				color: #666666;
				margin-top: 10rpx;
			}

			.li-selection {
				font-size: 24rpx;
				color: #666666;
				margin-top: 10rpx;
			}

			.li-num-price {
				.li-num {
					color: #000;
					font-size: 24rpx;
				}

				.li-price {
					color: #ff3b3b;
					font-size: 30rpx;
					padding-left: 10rpx;
				}
			}
		}
	}
}
</style>
